<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/jquery/jquery.mobile-1.4.5.css">
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script src="/static/jquery/jquery.mobile-1.4.5.js"></script>
    <script src="/static/jquery-cookie/jquery.cookie.js"></script>
</head>

<body>
    <div data-role="page" style="display: flex; flex-direction:column; justify-content:center;align-items:center;">

        <div data-role="header" style="width: 100%;">
            <h1>后台登录</h1>
        </div>

        <div data-role="main" class="ui-content">
            <form method="post" action="/web/login/" id="dosubmit">
                {% csrf_token %}
                <label for="fname" class="ui-hidden-accessible">phone</label>
                <input type="text" name="fname" id="fname" placeholder="phone" data-clear-btn="true"
                    pattern="^1[23456789]\d{9}$">

                <label for="hcode" class="ui-hidden-accessible">pcode</label>
                <input type="text" name="hcode" id="hcode" placeholder="pcode" data-clear-btn="true" pattern="\d{4}">

                <label id="sub" style="color: brown;"></label>

                <div style="display: flex;justify-content:space-around">
                    <input type="button" value="取验证码" data-icon="mail" data-iconpos="right" data-inline="true"
                        id="hascode">
                    <input type="button" value="提交按钮" data-icon="check" data-iconpos="right" data-inline="true"
                        id="hastoken">
                </div>

            </form>
        </div>

        <div data-role="footer" style="width: 100%;">
            <h1>Copyright 2022-2023 渝ICP备20008438号-2</h1>
        </div>

    </div>
</body>

<script>
    $(document).ready(function () {
        $("#hascode").on("tap", function (event) {
            // 请求验证码
            var phone = $("#fname").val();
            var VailPhone = /^1[23456789]\d{9}$/g;
            if (!VailPhone.test(phone)) { alert("手机号格式不正确"); return false; }
            $.ajax({
                url: "/api/sems/",
                type: "post",
                data: {
                    username: phone,
                    act: "SEMS"
                },
                success: function (res) {
                    //console.log(res);
                    $("#sub").html(res.resmsg);
                },
                error: function (res) { $("#sub").html(res.resmsg); }
            });
            event.preventDefault();
        });
        $("#hastoken").on("tap", function (event) {
            // 提交登录
            var phone = $("#fname").val();
            var pcode = $("#hcode").val();
            var VailPhone = /^1[23456789]\d{9}$/g;
            if (!VailPhone.test(phone)) { alert("手机号格式不正确"); return false; }
            var VailPcode = /^\d{4}$/g;
            if (!VailPcode.test(pcode)) { alert("验证码格式不正确"); return false; }
            $.ajax({
                url: "/user/login/",
                type: "post",
                data: JSON.stringify({
                    username: phone,
                    password: pcode,
                    act: "SEMS"
                }),
                contentType: "application/json",
                success: function (res) {
                    $.cookie('token', res.resmsg, { path: '/' });
                    location.href = "/web/index/";
                    //if (res.rescode == 200) {
                    //    localStorage.setItem('token', res.resmsg);
                    //    localStorage.setItem('uid', res.userid);
                    //    location.href = "/web/index/?pid=" + res.userid;
                    //}
                },
                error: function (res) { $("#sub").html(res); }
            });
            event.preventDefault();
        });
        // 编写jQuery方法...

    });
</script>

</html>